<!DOCTYPE HTML>
<html>

<head>
    <title>索取发票列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="detail-page">
            <h3>索取发票列表</h3>
            <hr>
            <div class="detail-section">
                <div class="detail-row">
                    <form id="" class="form-horizontal well">
                        <div class="row ">
                            <div class="control-group span8">
                                <label class="control-label">订单编号:</label>
                                <div class="controls">
                                    <input name="" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span8">
                                <label class="control-label">发票抬头:</label>
                                <div class="controls">
                                    <input name="" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span8">
                                <label class="control-label">发票号:</label>
                                <div class="controls">
                                    <input name="" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span8">
                                <label class="control-label">申请日期:</label>
                                <div class="controls">
                                    <input type="text" class="calendar input-small"> 
                                </div>
                            </div>
                            <div class="control-group span2 pull-right">
                                <button type="submit" class="button  jx-button">搜索</button>
                            </div>
                        </div>
                        <div class="row ">
                            <div class="control-group span8">
                                <label class="control-label">发票类型:</label>
                                <div class="controls">
                                    <select name="" id="">
                                        <option value="">请选择</option>
                                        <option value="">增值税普通发票</option>
                                        <option value="">增值税专用发票</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group span8">
                                <label class="control-label">开具类型:</label>
                                <div class="controls">
                                    <select class="normal-input" name="" id="">
                                        <option value="">请选择</option>
                                        <option value="">个人</option>
                                        <option value="">企业</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div id="tab"></div>
                    <div id="panel" class="">
                        <div>
                            <div id="grid"></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
                <!-- 表格 start-->
                <!--   <div id="grid"></div> -->
                <!-- 表格 end-->
            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
    <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
    <script type="text/javascript">
    BUI.use('common/page');
    </script>
    <!-- script start -->
    <script>
    BUI.use(['bui/grid', 'bui/data', 'bui/tab', 'bui/calendar', 'common/search'], function(Grid, Data, Tab, Calendar, Search) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '申请ID',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 150
            }, {
                title: '申请时间 ',
                elCls: 'center',
                dataIndex: 'b',
                width: 200
            }, {
                title: '寄出时间',
                elCls: 'center',
                dataIndex: 'c',
                width: 200
            }, {
                title: '账号',
                elCls: 'center',
                dataIndex: 'd',
                width: 100
            }, {
                title: '发票状态',
                elCls: 'center',
                dataIndex: 'e',
                width: 100
            }, {
                title: '发票类型',
                dataIndex: 'f',
                elCls: 'center',
                width: 100
            }, {
                title: '合并订单数',
                dataIndex: 'g',
                elCls: 'center',
                width: 100
            }, {
                title: '发票金额',
                dataIndex: 'h',
                elCls: 'center',
                width: 100
            }, {
                title: '物流公司',
                dataIndex: 'i',
                elCls: 'center',
                width: 200
            }, {
                title: '运单号',
                dataIndex: 'j',
                elCls: 'center',
                width: 200
            }, {

                title: '操作',
                dataIndex: 'h',
                elCls: 'center',
                width: 200,
                renderer: function(value, obj) {
                    var editStr = Search.createLink({ //链接使用 此方式
                        id: 'edit' + obj.id,
                        title: '发票详情',
                        text: '[ 详细 ] ',
                        href: 'templates/finance/invoice-list/invoice-detail.html'
                    })

                    return editStr;
                }
            }],
            data = [{
                a: '56145671571 ',
                b: '2016-3-14 09:00:00',
                c: '2016-3-14 11:00:00',
                d: '15900684377 ',
                e: '未开票',
                f: '增值税专用发票',
                g: '4 ',
                h: '1,512.00',
                i: '韵达快递',
                j: '47187657817',
            }];
        var datepicker = new Calendar.DatePicker({
            trigger: '.calendar',
            autoRender: true
        });
        var store = new Store({ //初始化数据
                data: data,
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,

                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                store: store
            }),
            tab = new Tab.TabPanel({
                render: '#tab',
                elCls: 'nav-tabs',
                panelContainer: '#panel', //如果内部有容器，那么会跟标签项一一对应，如果没有会自动生成
                //selectedEvent : 'mouseenter',//默认为click,可以更改事件
                autoRender: true,
                children: [{
                    title: '全部',
                    value: '1',
                    selected: true
                }, {
                    title: '已开票',
                    value: '2',
                    panelContent: '<p>已退款</p>'
                }, {
                    title: '待开票',
                    value: '3',
                    panelContent: '<p>自定义内部信息</p>'

                }]
            });
        tab.on('selectedchange', function(ev) {
            var item = ev.item;
            /*切换tab之后显示相应数据*/

        });
        tab.setSelected(tab.getItemAt(0));
        grid.render();
    });
    </script>
    <!-- script end -->

    <body>

</html>
